<template>
<!-- 
   page-sizes	每页显示个数选择器的选项设置
   layout	组件布局，子组件名用逗号分隔 不用动
   current-page	当前页数
   page-size	每页显示条目个数
   hide-on-single-page	只有一页时是否隐藏 默认false
   事件
   size-change	pageSize 改变时会触发
   current-change	currentPage 改变时会触发
 -->
  <div class="page">
    <el-pagination
      @size-change="SizeChange"
      @current-change="CurrentChange"
      :current-page="paginfo.page"
      :page-sizes="[2,4,8,10]"
      :page-size="paginfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {

     methods: {
      SizeChange(val) {
       
        this.paginfo.size=val;
        sessionStorage.setItem("paginfo",JSON.stringify(this.paginfo));
        this.$emit("search",this.paginfo);
      },
      CurrentChange(val) {
        
        this.paginfo.page = val
        sessionStorage.setItem("paginfo",JSON.stringify(this.paginfo));
        this.$emit("search",this.paginfo);
      }
     },
     data(){
         return{
            
             paginfo:{}

            
         }
     },
     created(){
         this.paginfo = sessionStorage.getItem("paginfo")?JSON.parse(sessionStorage.getItem("paginfo")):{size:2,page:1};
     },
     mounted(){ 
          this.$emit("search",this.paginfo);

     },
     props:["totals"]
    
};
</script>

<style lang="stylus" scoped>
.page
    width 100%
.el-pagination
    margin-top 10px
    text-align right
   
</style> 